<template>
    <div>
        <header-cmp>
            <span>地址管理</span>
        </header-cmp>
        <div v-if="list.length > 0">
            <div class="addr" v-for="(p,i) in list" :key="i" @click="update(p,'update')">
                <div class="user">
                    <div style="margin-right:5%">{{p.name}}</div>
                    <div>{{p.tel}}</div>
                </div>
                <div class="addrs">
                    <div style="color:red" v-if="p.isDefault">[默认]</div>
                    <div style="margin-left:2%">{{p.province}}</div>
                    <div style="margin-left:2%">{{p.city}}</div>
                    <div style="margin-left:2%">{{p.county}}</div>
                    <div style="margin-left:2%">{{p.addressDetail}}</div>
                </div>
            </div>
            <div class="add" @click="addr('add')"><span>添加地址</span></div>
        </div>
        <div v-else>
            <div>您还没有添加过地址</div>
            <div class="add" @click="addr('add')"><span>添加地址</span></div>
        </div>
        <nav-cmp/>
    </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import NavCmp from '../components/NavCmp.vue'
import axios from 'axios'
import {mapState,mapMutations} from 'vuex'
export default {
  components:{
    HeaderCmp,
    NavCmp
    
  },
  data(){
      return{
        pathStatus:false
      }
  },
  computed:{
      ...mapState({
          token:state=>state.user.token,
          list:state=>state.addr.list
      })
  },
  created(){
      if(this.$route.params.type == 'select'){
            this.pathStatus=true
      }
      this.getData()

  },
  methods:{
      ...mapMutations(['initData','initAddr']),
      getData(){
        axios({
            url:'/ajax/getAddress',
            method:'post',
            data:{
                token:this.token,
            }
        }).then(({data})=>{
            if(data.success){
                this.initData(data.data)
            } 
        })
      },
      addr(i){
          this.$router.push({name:'addrs',params:{key:i}})
      },
      update(p,i){
          if(this.pathStatus){
              this.initAddr(p)
              this.$router.back()
              return
          }
          this.$router.push({name:'addrs',params:{obj:p,key:i}})
      }
  }
}
</script>

<style lang="scss" scoped>
.add{
    width: 100px;
    height: 44px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    margin: 10% auto;

}
.addr{
    border-bottom: 1px solid black;
    margin-bottom: 3%;
    padding: 5px;
    .user{
        display: flex;
        align-items: center;
        margin-bottom: 3%;
    }
    .addrs{
        display: flex;
    }
}
</style>